<!--Shift+Alt+向上-->
<!--template：HTML script：js
style：CSS注意:script标签上必须有setup!-->
<template>
  <!--插值指令:将贞面上显示的文本内容与响应式变量
  的只进行绑定如果修改响应式变量的值,页面显示文本也会随之改变-->
  <h1>杨硕第一个Vue组件</h1>
  <span>{{info}}</span>
  <h4>每天都在看{{info}}</h4>
  {{info+'杨硕说梦话'}}
  <hr>
  <p v-text="info2"></p><!--v-text渲染文本内容-->
  <p v-html="info2"></p><!--v-html若有HTML元素，会按照元素效果进行渲染-->
  <hr>
  <button @click="f()">按钮</button>
</template>

<script setup>
import {ref} from "vue";

//1.创建响应式变量
const info=ref('杨硕上课睡觉');
const info2=ref('杨硕<mark>上课和徐志杰</mark>打架');
const f=()=>{
  console.log(info.value);
}
</script>

<style scoped>

</style>